<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/product.css">
    <!--<link rel="stylesheet" href="../layui/css/layui.css" media="all">-->
</head>
<body >
<div class="container-fluid" style="background-color: #F2F2F2;height: 1200px">

    <div class="row e">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="background-color: white;">
            <div>
                <div class="e-top1">
                    <h3>SPECIAL <span style="color: red">PRODUCTS</span></h3>
                </div>
                <div class="e-top2">
                    ▶<a href=""> view all products</a>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="row e-shopping" id="aa">
                <!--<div >
                    <a href=""><img src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/p1.jpg" alt=""></a>
                    <h4><a href="">Nike Roshe Run</a></h4>
                    <a href="" class="e-a">
                        <span>109.90$  </span>
                        <small>GET NOW</small>
                        <label>></label>
                    </a>
                </div>-->
            </div>
            <nav style="text-align: right">
                <ul class="pagination" id="ul" style="margin: 0 auto;">

                </ul>
            </nav>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"> </script>
<script>
    var currPage=1;
    pageSize=12;
    var search = location.search;
    console.log(search)
    // 按照=对参数分割
    var arr = search.split("=")
    if(arr.length >1){
        currPage = arr[1]
    }

    console.log(currPage)

    var k;
    var j= currPage.toString().split("&")
    if(j.length >1){
        k = j[0]
    }
    var l=1;

    if(k>0 && k<100){
        l=k;
    }

    console.log(l)
    // console.log(self.parent.frames["iframe2"].frames.document.getElementById("abr"))
    var p1 = self.parent.frames["iframe2"].frames.document.getElementById("abr").value
    // console.log(self.parent.frames["iframe2"].frames.document.getElementById("abt"));
    var p2 = self.parent.frames["iframe2"].frames.document.getElementById("abt").value
    var p3 = self.parent.frames["iframe2"].frames.document.getElementById("aby").value
    var p4 = self.parent.frames["iframe2"].frames.document.getElementById("abu").value

    console.log(p1)
    console.log(p2)
    console.log(p3)
    console.log(p4)


    GetChildValue(p1,p2,p3,l,p4)

    function GetChildValue(a,b,c,d,e){
        console.log(d)

        $.getJSON("http://localhost:8080/nb/shoe?currPage="+ d + "&pageSize=" + pageSize + "&goodBrand=" + c + "&goodSex="+ e + "&goodUpper=" + a + "&goodScience=" + b,function (data) {
            console.log(data)
            var list = data.data.list
            f(list)
            generatePage(data.data.navigatepageNums,  data.data.pageNum
                , data.data.pages,)
        });

        /*var p = self.parent.frames["iframe2"].frames.f()
        console.log(p)*/

        function generatePage(navigatepageNums, pageNum, pages,){
            /*console.log(a)
            console.log(b)
            console.log(c)*/
            /*var p1 = self.parent.frames["iframe2"].frames.document.getElementById("abr").value
            var p2 = self.parent.frames["iframe2"].frames.document.getElementById("abt").value
            var p3 = self.parent.frames["iframe2"].frames.document.getElementById("aby").value

            console.log(p1)
            console.log(p2)
            console.log(p3)*/



            var html = ''
            console.log(pageNum == 1)
            if(pageNum == 1){
                html += `<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
            } else {
                html += `<li><a href="http://localhost:63343/qiguai/html/shoe.html?currPage=${pageNum-1}&pageSize=12&goodBrand=${p3}&goodSex=${p4}&goodUpper=${p1}&goodScience=${p2}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
            }
            // console.log(navigatePages)
            // 生成页码
            for(let i = 0; i < navigatepageNums.length; i++){
                if(pageNum == navigatepageNums[i]){
                    // 当前页class=active，设置选中效果
                    html += `<li class="active"><a href="#">${navigatepageNums[i]}</a></li>`
                } else {
                    // showhero.html?
                    // 不是当前页
                    html += `<li><a href="http://localhost:63343/qiguai/html/shoe.html?currPage=${navigatepageNums[i]}&pageSize=12&goodBrand=${p3}&goodSex=${p4}&goodUpper=${p1}&goodScience=${p2}">${navigatepageNums[i]}</a></li>`
                }
            }

            if(pageNum == pages) {
                html += `<li class="disabled"><a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a></li>`
            } else {
                html += `<li><a href="http://localhost:63343/qiguai/html/shoe.html?currPage=${pageNum+1}&pageSize=12&goodBrand=${p3}&goodSex=${p4}&goodUpper=${p1}&goodScience=${p2}" onclick="" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a></li>`
            }

            $("#ul").html(html)

        }
    }

    /*$.getJSON("http://localhost:8080/nb/nbdaa?currPage="+ d + "&pageSize=" + pageSize ,function (data) {
        console.log(data)
        var list = data.data.list
        f(list)
        generatePage(data.data.navigatepageNums,  data.data.pageNum
            , data.data.pages)
});*/



    function f(list) {
        let html = ''
        for(let i = 0; i < list.length; i++) {
            console.log(list[i])
            html += `
            <div class="col-md-3" >
            <div style="float: left">
            <a href="http://localhost:63343/qiguai/html/single-goods.html?id=${list[i].goodId}" target="_blank"><img src="${list[i].goodPhoto}" alt=""></a>
            <h4 ><a href="http://localhost:63343/qiguai/html/single-goods.html?id=${list[i].goodId}" target="_blank" style="width: 200px;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;display: -webkit-box;display:block">${list[i].goodName}</a></h4>
            <a href="http://localhost:63343/qiguai/html/single-goods.html?id=${list[i].goodId}" target="_blank" class="d-a">
            <span>${list[i].goodMoney}$  </span>
            <small>GET NOW</small>
            <label>></label>
            </a>
            </div>
            </div>
            `
        }
        $("#aa").html(html)
    }




    /*    var a = document.getElementById("aby").value;
        console.log(a)

    console.log("1111")*/

    /* function GetChildValue(a,b,c){
         console.log(a)
         console.log(b)
         console.log(c)
     }*/

</script>
</body>
</html>